<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{cache("kv_site_name")}}</title>

    <link href="{{asset('system/css/bootstrap.min.css')}}" rel="stylesheet" type="text/css"/>
    <link href="{{asset('system/js/toastr/toastr.css')}}" rel="stylesheet" type="text/css"/>
    <link href="{{asset('system/css/login.css')}}" rel="stylesheet" type="text/css"/>
    <link href="{{asset('system/css/animate.css')}}" rel="stylesheet" type="text/css"/>
    <link href="{{tbFont()}}" rel="stylesheet" type="text/css"/>
    <style type="text/css">
        .login-panel {
            -webkit-background-size: 100% 100%;
            background-size: 100% 100%;
            background-image: url('{{$theme['panel']}}');
        }
        .login-panel .form-box .group:hover {
            border: {{$theme['color']}} solid 1px;
        }
        .login-panel .form-box a:hover {
            color: {{$theme['color']}};
            text-decoration: underline;
        }
        .find-pass-enter {
            opacity: 0;
        }
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>

<div class="login-bg" style="background-image: url('{{$theme['useview']}}');"></div>

<div id="app" class="contain-app">
    <div class="login-panel {{$theme['center']?"center-panel":""}}">
        <form method="POST" v-on:submit.prevent="onSubmit">

            <input type="hidden" name="_token" value="{{csrf_token()}}"/>

            <div class="form-box">
                <span class="title">账户登录</span>

                <div class="group" style="margin-top: 20px;">
                    <i class="iconfont icon-yonghuming"></i>
                    <input name="username" type="text" v-model="username"/>
                </div>
                <div class="group">
                    <i class="iconfont icon-mima"></i>
                    <input name="userpass" type="password" v-model="userpass"/>
                </div>
                <div class="group yzm-div">
                    <i class="iconfont icon-ad80"></i>
                    <input name="yzm" type="text" v-model="yzm"/>

                    <img :src="yzm_url" @click="refreshYzm"/>
                </div>
                <div class="clearfix"></div>
                <div style="margin-bottom: 40px;">
                    <a @click="openFind" style="float: right
                    ;
                        cursor: pointer
                    ;">忘记密码？</a>
                </div>
                <div class="clearfix"></div>
                <div class="login">
                    <button type="submit"
                            style="background-color: {{$theme['color']}}">
                        登&nbsp;&nbsp;录
                    </button>
                </div>
            </div>
        </form>
    </div>
    <transition name="find-pass"
                enter-active-class="animated zoomIn"
                leave-active-class="animated zoomOut">
        <div class="find-pass" v-show="showFind" v-cloak>
            <div class="title">
                忘 记 密 码 ？<a class="close" @click="closeFind"></a>
            </div>

            <div class="content">
                <img src="{{asset('system/imgs/find-pass.png')}}"/>
                <div class="tip">
                    <p>
                        请输入您的用户名，密码将会发送至您的绑定邮箱，请注意查收邮件！
                    </p>
                    <input v-model="finduser" type="text" placeholder="Please enter your username."/>
                </div>
                <div class="action">
                    <button @click="closeFind" class="cancel">取消</button>
                    <button @click="findPass" class="confirm">立即找回</button>
                </div>
            </div>
        </div>
    </transition>
</div>

<script src="{{asset('system/js/jquery.min.js')}}"></script>
<script src="{{asset('system/js/jquery.form.js')}}"></script>
<script src="{{asset('system/js/toastr/toastr.min.js')}}"></script>
<script src="{{asset('system/js/vue.min.js')}}"></script>
<script src="{{asset('system/js/vue-resource.min.js')}}"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            username: "",
            userpass: "",
            yzm: "",
            yzm_url: "{{route('coms.user-code')}}?code=" + Math.random(),

            showFind: false,
            finduser: ""
        },
        methods: {
            refreshYzm: function () {
                this.yzm_url = "{{route('coms.user-code')}}?code=" + Math.random();
            },
            onSubmit: function () {
                this.$http.post("{{route('login.act')}}", {
                    "username": this.username,
                    "userpass": this.userpass,
                    "yzm": this.yzm
                }).then(
                    function (response) {       //请求成功
                        var json = response.body;
                        if (json.code == 0) {
                            toastr['success'](json.msg);
                            window.location = "{{route('sys.center')}}";
                        } else if (json.code == 1) {
                            toastr['error'](json.msg);
                            this.refreshYzm();
                        }
                    }, function (response) {    //请求失败
                        toastr['error'](response.statusText);
                    });
            },
            openFind: function () {
                this.showFind = true;
            },
            closeFind: function () {
                this.showFind = false;
            },
            findPass: function () {
                this.$http.post("{{route('login.find')}}", {
                    username: this.finduser
                }).then(
                    function (response) {   //请求成功
                        var json = response.body;
                        if (json.code == 0) {
                            toastr['success'](json.msg);
                            this.closeFind();
                        } else {
                            toastr['error'](json.msg);
                        }
                    },
                    function (response) {   //请求失败
                        toastr['error'](response.statusText);
                    }
                );
            }
        },
    });
    Vue.http.headers.common['X-CSRF-TOKEN'] =
        document.querySelector('meta[name=csrf-token]').getAttribute('content');
</script>
</body>
</html>